<template>
	<view class="moment_container">
		<view class="moment_list_card">
			<!-- 左侧头像 -->
			<view class="useravater" @click="goToMySpace(item.customerNo)">
				<image :src="item.avatar ||  defaultAvatar" mode=""></image>
			</view>
			<!-- 右侧内容区域 -->
			<view class="content" @click="$emit('detailAction')">
				<!-- 昵称 -->
				<text class="username">{{item.nickname}}</text>
				<!-- 内容 -->
				<text v-if="item.title" class="usertext">{{item.title}}</text>
				<!-- 图片 -->
				<view class="userimg">
					<block v-if="item.title">
						<view style="height: 100px;overflow: hidden;">
							<mp-html :content="item.content" />
						</view>
					</block>
				</view>

				<!-- 点赞||评论列表 -->
				<view v-if="item.likes || item.comments">
					<!-- 点赞 -->
					<view v-if="item.likes" class="userlike">
						<u-icon name="heart" color="red" size="20"></u-icon>
						<view class="like_name">
							<text v-for="(like,index) in item.likes" :key="index" class="name_text">{{like.name}}</text>
						</view>
					</view>
					<!-- 评论 -->
					<view class="comment" v-if="item.comments">
						<u-icon name="chat" color="#0056b3" size="20"></u-icon>
						<view class="">
							<view class="comment_text" v-for="(comment,index) in item.comments" :key="index">
								<text style="color: #0056b3;">{{comment.username}}:</text>
								<text class="comment_content">{{comment.content}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="operation-view">
			<view class="operation-item">
				<u-icon name="thumb-up" label="点赞" labelPos="right"></u-icon>
			</view>
			<view class="operation-item">
				<u-icon name="chat" label="评论" labelPos="right"></u-icon>
			</view>
			<view class="operation-item">
				<u-icon name="share-square" label="分享" labelPos="right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BsinMomentList',
		props: {
			item: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				defaultAvatar: '../../static/images/pfp.png',
				h: undefined,
				w: undefined
			}
		},
		computed: {
			imageStyle() {
				return `width:${this.w}px;height:${this.h}px;`
			},
			mediasCompute() {
				var mediasArr = this.item.medias.split(",");
				return mediasArr;
			}
		},
		methods: {
			// 图片加载执行
			loadImage(e) {
				let maxW = 500,
					maxH = 350
				let w = e.detail.width
				let h = e.detail.height
				// 最大值
				maxW = uni.upx2px(maxW)
				maxH = uni.upx2px(maxH)
				if (h <= maxH) {
					// 用原来的宽高
					this.w = w <= maxW ? w : maxW
					this.h = h
					this.$emit('load', {
						w: this.w,
						h: this.h
					})
					return;
				}
				this.h = maxH
				let w2 = maxH * (w / h)
				this.w = w2 <= maxW ? w2 : maxW
				this.$emit('load', {
					w: this.w,
					h: this.h
				})
			},

			// 跳转个人主页
			goToMySpace(customerNo) {
				uni.navigateTo({
					url: `/pages/My/MySpace?customerNo=${customerNo}`
				})
			},

			// 预览图片
			preview(src) {
				uni.previewImage({
					current: src,
					urls: this.mediasCompute
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.moment_container {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		border-bottom: 2rpx solid #E9E8E5;

		.moment_list_card {
			display: flex;

			// 左侧头像
			.useravater {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 右侧内容区域
			.content {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 20rpx;

				.username {
					color: #0056b3;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.usertext {
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}

				.userimg {
					display: flex;
					flex-wrap: wrap;
					padding: 20rpx 0;
				}

				.uservideo {
					padding: 20rpx 0;
				}

				// 点赞
				.userlike {
					display: flex;
					align-items: flex-start;
					margin-top: 20rpx;
					padding: 20rpx;
					background-color: #f8f9fa;
					border-bottom: 1rpx solid #dee2e6;

					.like_name {
						display: flex;
						flex-wrap: wrap;

						.name_text {
							margin-left: 10rpx;
						}
					}
				}

				// 评论
				.comment {
					display: flex;
					align-items: flex-start;
					padding: 20rpx;
					background-color: #f8f9fa;

					.comment_text {
						margin-left: 10rpx;

						.comment_content {
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.operation-view {
			display: flex;
			flex-direction: row;
			margin-top: 16rpx;

			.operation-item {
				flex: 1;
				justify-content: center;
				align-items: center;
				display: flex;
			}
		}
	}
</style>
